<!--
 * @Descripttion: 选择设备类型
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-24 09:07:20
 * @LastEditTime: 2021-08-24 11:14:21
-->
<template>
    <div id="getDeviceType">
        <div class="bg-title">
            <Theader :title="subName">
                <template slot="header_arrow">
                    <van-icon size="25" name="arrow-left" @click="back" />
                </template>
            </Theader>
        </div>
        <van-tabs v-model="activeName">
            <van-tab title="间隔单元" name="a"></van-tab>
            <van-tab title="设备类型" name="b"></van-tab>
        </van-tabs>
       <div class="out-main">
            <!-- 设备类型 -->
            <div class="in-main" v-show="activeName == 'a' ">
                <van-collapse v-model="activeName1" v-for="(item,i1) in deviceTypeList" :key="i1">
                    <van-collapse-item :title="item.deviceType" :name="i1">
                        <van-cell-group  v-for="(list,i2) in item.deviceList" :key="i2"  inset>
                            <van-cell :title="list.deviceName" />
                        </van-cell-group>
                    </van-collapse-item>
                </van-collapse>
            </div>

            <!-- 间隔单元 -->
            <div class="in-main" v-show="activeName == 'b' ">
                <van-collapse v-model="activeName2" v-for="(item,i1) in deviceJgList" :key="i1">
                    <van-collapse-item :title="item.deviceJg" :name="i1">
                        <!-- <van-cell v-for="(list,i2) in item.deviceList" :key="i2" :title="list" /> -->
                    </van-collapse-item>
                </van-collapse>
            </div>
       </div>
    </div>
</template>

<script>
import Theader from '../../view/components/header.vue'
export default {
    data(){
        return{
            subName:'下关变电站',   //变电站
            activeName:'a', //设备类型OR间隔单元
            activeName1:[''],   //设备类型下设备
            activeName2:[''],   //间隔单元下设备
            deviceTypeList:[{
                deviceType:'主变压器',
                deviceList:[{
                    deviceName:'1#主变',
                },{
                    deviceName:'2#主变',  
                },{
                    deviceName:'3#主变',  
                },{
                    deviceName:'4#主变',  
                },{
                    deviceName:'5#主变',  
                },{
                    deviceName:'6#主变',  
                }]
            },{
                deviceType:'避雷器',
            },{
                deviceType:'断路器',
            },{
                deviceType:'开关柜',
            }],
            deviceJgList:[{
                deviceJg:'1#主变压器单元',
            },{
                deviceJg:'2#主变压器单元',
            },{
                deviceJg:'3#主变压器单元',
            },{
                deviceJg:'4#主变压器单元',
            }],
        }
    },
    mounted(){
    },
    methods:{
        /**
         * @description: 返回
         */
        back(){
             this.$router.push({
                name:'deviceRecordSearch',
            })
        },
    },
    components:{
        Theader
    }
}
</script>

<style>
#getDeviceType .bg-title{
    height: 45px;
}
#getDeviceType .out-main{
    height:calc(100vh - 110px);
    padding: 10px;
    background-color: #F5F6F7;
}
#getDeviceType .in-main{
    padding: 10px;
    /* background-color: #fff; */
    margin-bottom: 10px;
    border-radius: 5px;
    max-height: calc(100% - 20px);
    overflow: auto;
}
#getDeviceType .van-collapse-item__title{
    font-size: 0.9375rem;
    color: #333333;
    background-color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
#getDeviceType .van-collapse-item__content{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
#getDeviceType .van-cell-group{
    background-color: #F5F6F7;
}
#getDeviceType .van-cell-group--inset{
    margin: 0 0 3px 0;
}

#getDeviceType .van-collapse{
    background-color: #F5F6F7;
    margin-bottom: 5px;
}
</style>